<template>
	<view class="box">
		<uni-nav-bar left-icon="left"    :statusBar="true" titleSize="30px" leftText="返回" right-text="提交" @clickRight="btnok"  title="新增调拨"  @clickLeft="back"   :fixed="true" backgroundColor="#3286ed" color="#fff"/>
			<u-cell>
			    <template #title>
			        <view class="u-cell-text" style="color: #ccc;">调拨单</view>
			    </template>
				</u-cell>
				<u--form class="form" labelPosition="left" labelWidth="150px" :model="form" ref="form">
					<u-form-item  label="库存调拨单号" prop="serialNum" borderBottom ref="item1"  >
						<u--input   v-model="form.serialNum" border="none" placeholder="库存调拨单号"></u--input>
					</u-form-item>
					<u-form-item @click="arrivalDateShow=true" label="调拨日期" prop="repTransferDate" borderBottom ref="item1"  >
						<u--input    v-model="form.repTransferDate" border="none" placeholder="调拨日期"></u--input>
					</u-form-item>
					
					
					<u-form-item  label="负责人" prop="responsibleName" borderBottom ref="item1"  >
						<u--input  v-model="form.responsibleName" border="none" placeholder="负责人"></u--input>
					</u-form-item>
					<u-form-item @click="checkWhouse('1')" label="调出仓库" prop="outRepertory" borderBottom ref="item1"  >
						<u--input   v-model="form.outRepertory" border="none" placeholder="调出仓库"></u--input>
					</u-form-item>
					<u-form-item   label="调出仓库负责人" prop="outRepertoryName" borderBottom ref="item1"  >
						<u--input   v-model="form.outRepertoryName" border="none" placeholder="调出仓库负责人"></u--input>
					</u-form-item>
					
					<u-form-item @click="checkWhouse('2')" label="调入仓库" prop="inRepertory" borderBottom ref="item1"  >
						<u--input   v-model="form.inRepertory" border="none" placeholder="调入仓库"></u--input>
					</u-form-item>
					<u-form-item  label="调入仓库负责人" prop="inRepertoryName" borderBottom ref="item1"  >
						<u--input   v-model="form.inRepertoryName" border="none" placeholder="调入仓库负责人"></u--input>
					</u-form-item>
					<u-form-item @click="productListFn(form.outRepertory)" label="调拨产品" prop="syTransferProductTList" borderBottom ref="item1"  >
						 
					</u-form-item>
					 <view  style="padding-right: 5xp;margin-bottom: 5px;">
					 	<uni-table border stripe emptyText="暂无更多数据" >
					 		<!-- 表头行 -->
					 		<uni-tr>
					 			<uni-th align="center" width="70px">产品名称</uni-th>
					 			<uni-th align="center" width="60px">型号</uni-th>
					 			<uni-th align="center" width="50px">数量</uni-th>
					 			 <uni-th align="center" width="50px">仓库</uni-th>
					 		</uni-tr>
					 		<!-- 表格数据行 -->
					 		<uni-tr v-for="(item,index) in form.syTransferProductTList" :key="index">
					 			<uni-td align="center">{{item.productName}}</uni-td>
					 			<uni-td align="center">{{item.model}}</uni-td>
					 			<uni-td align="center">
					 				<template slot-scope="scope">
					 					<input @input="isquantity(item,index)"  v-model="item.quantity" type="text"/>
					 				</template>
					 			</uni-td>
							<uni-td align="center">{{item.warehouseName}}</uni-td>
					 			 
					 		</uni-tr>
					 	</uni-table>
					 </view>
					 <u-form-item    label="运输方式" prop="logisticsTypeName" borderBottom ref="item1">
					     <u--input :readonly="true" v-model="form.logisticsType" border="none" placeholder="运输方式">
					     </u--input>
					     <u-icon slot="right" name="arrow-right"></u-icon>
					 </u-form-item>
					</u--form>
					<!-- 物流信息 -回显-->
						<view  v-for="(item,index) in tranferLogistic">
							 <view style="display: flex;justify-content: space-between;margin: 5px 10px;color: skyblue;">
							 	<span style="display: block;">物流{{index+1}}</span>
								<span style="display: block;" @click="editlogistic(item)">修改</span>
							 </view>
							<u--form class="form" labelPosition="left" labelWidth="100px" :model="item" ref="form">
								<u-form-item  label="调拨单编号" prop="orderNo" borderBottom ref="item1"  >
									<u--input :readonly="true" v-model="item.orderNo" border="none" placeholder="调拨单编号"></u--input>
								</u-form-item>
								<u-form-item  label="出入库类型" prop="orderProperty" borderBottom ref="item1"  >
									 <u-text v-if="item.orderProperty==1" text="出库"></u-text>
									 <u-text v-if="item.orderProperty==2" text="入库"></u-text>
									 <u-text v-if="item.orderProperty==3" text="调拨"></u-text>
								</u-form-item>
								<u-form-item  label="调入仓库" prop="warehouseName" borderBottom ref="item1"  >
									<u--input :readonly="true" v-model="item.warehouseName" border="none" placeholder="对接人"></u--input>
								</u-form-item>
								<u-form-item  label="运输方式" prop="shippingType" borderBottom ref="item1"  >
									<u-text v-if="item.shippingType=='0'" text="快递"></u-text>
									<u-text v-if="item.shippingType=='1'" text="物流"></u-text>
									<u-text v-if="item.shippingType=='2'" text="自提"></u-text>
									<u-text v-if="item.shippingType=='3'" text="专车"></u-text>
								</u-form-item>
								 <!-- <u-form-item  label="对接人" prop="consigneeName" borderBottom ref="item1"  >
								 	<u--input :readonly="true" v-model="item.consigneeName" border="none" placeholder="对接人"></u--input>
								 </u-form-item>
								 <u-form-item  label="对接人电话" prop="consigneeTel" borderBottom ref="item1"  >
								 	<u--input :readonly="true" v-model="item.consigneeTel" border="none" placeholder="对接人电话"></u--input>
								 </u-form-item> -->
								<u-form-item  label="司机名称" prop="driverName" borderBottom ref="item1">
									<u--input v-model="item.driverName" border="none" placeholder="请输入司机名称"></u--input>
								</u-form-item>
								
								<u-form-item  label="司机联系方式" prop="driverTel" borderBottom ref="item1">
									<u--input v-model="item.driverTel" border="none" placeholder="司机联系方式"></u--input>
								</u-form-item>
								<u-form-item  label="车辆信息" prop="vehicleInformation" borderBottom ref="item1">
									<u--input v-model="item.vehicleInformation" border="none" placeholder="车辆信息"></u--input>
								</u-form-item>
								<!-- <u-form-item  label="项目地址" prop="projectAddress" borderBottom ref="item1">
									<u--text :text="item.projectAddress" border="none" placeholder="请输入司机名称"></u--text>
								</u-form-item> -->
								<u-form-item  label="物流费用" prop="logisticsExpenses" borderBottom ref="item1">
									<u--input v-model="item.logisticsExpenses" border="none" placeholder="物流费用"></u--input>
								</u-form-item>
								<u-form-item @click="arrivalDateShow=true"  label="到货日期" prop="arrivalDate" borderBottom ref="item1">
									<u--input readonly v-model="item.arrivalDate" border="none" placeholder="到货日期"></u--input>
										<u-icon slot="right" name="arrow-right"></u-icon>
								</u-form-item>
								<u-form-item    label="出库产品"   borderBottom ref="item1">
									 
								</u-form-item>
								<view  style="padding-right: 5xp;">
									<uni-table border stripe emptyText="暂无更多数据" >
										<!-- 表头行 -->
										<uni-tr>
											<uni-th align="center" width="70px">产品名称</uni-th>
											<uni-th align="center" width="60px">型号</uni-th>
											<uni-th align="center" width="50px">数量</uni-th>
											 
										</uni-tr>
										<!-- 表格数据行 -->
										<uni-tr v-for="(item,index) in item.logisticsProductList" :key="index">
											<uni-td align="center">{{item.productName}}</uni-td>
											<uni-td align="center">{{item.model}}</uni-td>
											<uni-td align="center">
												<template slot-scope="scope">
													<input v-model="item.quantity" type="text">
												</template>
											</uni-td>
											 
										</uni-tr>
									</uni-table>
								</view>
								</u--form>
						</view>
						
						<view style="width: 100%; height: 40px;;position: relative;">
							<u-button   @click="addlogInfo" style="width: 70px;height: 30px;margin-top: 10px; position: absolute;right: 10px;" :customStyle="{'transform': 'scale(0.9)'}" type="primary" text="添加物流"></u-button>
						</view>
						<view  v-if="logicShow">
							<u--form class="form" labelPosition="left" labelWidth="100px" :model="addlogisticForm" ref="form">
								<u-form-item  label="出库单编号" prop="orderNo" borderBottom ref="item1"  >
									<u--input :readonly="true" v-model="addlogisticForm.orderNo" border="none" placeholder="租赁订单"></u--input>
								</u-form-item>
								<u-form-item  label="出入库类型" prop="orderProperty" borderBottom ref="item1"  >
									 <u-text v-if="addlogisticForm.orderProperty==1" text="出库"></u-text>
									 <u-text v-if="addlogisticForm.orderProperty==2" text="入库"></u-text>
									  <u-text v-if="addlogisticForm.orderProperty==3" text="调拨"></u-text>
								</u-form-item>
								<u-form-item  label="发货仓库名" prop="warehouseName" borderBottom ref="item1"  >
									<u--input :readonly="true" v-model="addlogisticForm.warehouseName" border="none" placeholder="对接人"></u--input>
								</u-form-item>
								<u-form-item  label="运输方式" prop="shippingType" borderBottom ref="item1"  >
									<u-text v-if="addlogisticForm.shippingType=='0'" text="快递"></u-text>
									<u-text v-if="addlogisticForm.shippingType=='1'" text="物流"></u-text>
									<u-text v-if="addlogisticForm.shippingType=='2'" text="自提"></u-text>
									<u-text v-if="addlogisticForm.shippingType=='3'" text="专车"></u-text>
								</u-form-item>
								 <!-- <u-form-item  label="对接人" prop="consigneeName" borderBottom ref="item1"  >
								 	<u--input :readonly="true" v-model="addlogisticForm.consigneeName" border="none" placeholder="对接人"></u--input>
								 </u-form-item>
								 <u-form-item  label="对接人电话" prop="consigneeTel" borderBottom ref="item1"  >
								 	<u--input :readonly="true" v-model="addlogisticForm.consigneeTel" border="none" placeholder="对接人电话"></u--input>
								 </u-form-item> -->
								<u-form-item  label="司机名称" prop="driverName" borderBottom ref="item1">
									<u--input v-model="addlogisticForm.driverName" border="none" placeholder="请输入司机名称"></u--input>
								</u-form-item>
								
								<u-form-item  label="司机联系方式" prop="driverTel" borderBottom ref="item1">
									<u--input v-model="addlogisticForm.driverTel" border="none" placeholder="司机联系方式"></u--input>
								</u-form-item>
								<u-form-item  label="车辆信息" prop="vehicleInformation" borderBottom ref="item1">
									<u--input v-model="addlogisticForm.vehicleInformation" border="none" placeholder="车辆信息"></u--input>
								</u-form-item>
								<!-- <u-form-item  label="项目地址" prop="projectAddress" borderBottom ref="item1">
									<u--text :text="addlogisticForm.projectAddress" border="none" placeholder="请输入司机名称"></u--text>
								</u-form-item> -->
								<u-form-item  label="物流费用" prop="logisticsExpenses" borderBottom ref="item1">
									<u--input v-model="addlogisticForm.logisticsExpenses" border="none" placeholder="物流费用"></u--input>
								</u-form-item>
								<u-form-item   label="到货日期" prop="arrivalDate" borderBottom ref="item1">
									<u--input :clearable="true" v-model="addlogisticForm.arrivalDate" border="none" placeholder="到货日期"></u--input>
										<u-icon @click="arrivalDateShow=true" slot="right" name="arrow-right"></u-icon>
								</u-form-item>
								<u-form-item    label="出库产品"   borderBottom ref="item1">
									 
								</u-form-item>
								<view  style="padding-right: 5xp;margin-bottom: 5px;">
									<uni-table border stripe emptyText="暂无更多数据" >
										<!-- 表头行 -->
										<uni-tr>
											<uni-th align="center" width="70px">产品名称</uni-th>
											<uni-th align="center" width="60px">型号</uni-th>
											<uni-th align="center" width="50px">数量</uni-th>
											 
										</uni-tr>
										<!-- 表格数据行 -->
										<uni-tr v-for="(item,index) in addlogisticForm.logisticsProductList" :key="index">
											<uni-td align="center">{{item.productName}}</uni-td>
											<uni-td align="center">{{item.model}}</uni-td>
											<uni-td align="center">
												<template slot-scope="scope">
													<input :oninput="isquantity(item,index)"  v-model="item.quantity" type="text"/>
												</template>
											</uni-td>
											 
										</uni-tr>
									</uni-table>
								</view>
								</u--form>
							 <view style="display: flex;justify-content: center;">
							 	 <u-button style="width: 300px;margin: 10px;" type="success" @click="btnLogic">提交</u-button>
							 </view>
						</view>
						<u-datetime-picker :closeOnClickOverlay="true" @close="arrivalDateShow=false"
						    :show="arrivalDateShow" v-model="dateNow" @confirm="arrivalDateConfirm"
						    @cancel="arrivalDateShow=false" mode="date"></u-datetime-picker>
					<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {listTransfer,getTransfer} from '@/api/tranfer.js'
	import {addLogisticsApi,getLogisticsListApi} from '@/api/logistics.js'
	import {getDicts} from '@/api/dictionary/index.js'
	export default {
		data() {
			return {
				form:{},
				tranferLogistic:[],
				logicShow:false,
				addlogisticForm:{
					orderProperty:3
				},
				arrivalDateShow:false,
				dateNow:'',
				tranid:'',
				logisticsTypeOptionsDou:[],
				logisticsTypeOptions:[]
			};
		},
		created() {
			
		},
		onLoad(e) {
			this.getShippingTypeOptions()
			this.tranid=e.id
			console.log(e);
			this.getTranfer(e)
			
			this.getTranferLogistc(e)
			  this.dateNow = this.getNowTime()
			
		},
		methods:{
			// 根据调拨单号筛选
			async getTranfer(e){
				let res=await getTransfer(e.id)
				this.form=res.data
				this.form.logisticsType = this.getDictValue(this.logisticsTypeOptionsDou, this
				    .form.logisticsType)
				console.log(this.form.logisticsType);
			},
			// 根据单号查询物流
			async getTranferLogistc(e){
				let res=await getLogisticsListApi({orderId:e.id,orderProperty:'3'})
				this.tranferLogistic=res.rows
			},
			// 打开物流
			addlogInfo(){
				this.logicShow=true
				this.addlogisticForm.shippingType=this.form.logisticsType
				this.addlogisticForm.orderProperty="3"
				this.addlogisticForm.orderNo=this.form.serialNum
				this.addlogisticForm.orderId=this.form.id
				this.addlogisticForm.warehouseName=this.form.inRepertory
				this.addlogisticForm.logisticsProductList=this.form.syTransferProductTList
				this.addlogisticForm.logisticsProductList.forEach(item=>{
					delete item.createBy
					delete  item.createTime
					delete item.dataState
					delete item.id
					delete item.params
					delete item.searchValue
					delete item.transferNo
					delete item.updateBy
					delete item.updateTime,
					delete item.warehouseName
                    item.unit="",
					item.dayilyRen="",
					item.productId="",
					item.orderProperty="3"
				})
			},
			async btnLogic(){
				await addLogisticsApi(this.addlogisticForm)
				this.$refs.uToast.show({
					type:"success",
					message:'添加成功'
				})
				// 回显
				let res=await getLogisticsListApi({orderId:this.form.id,orderProperty:'3'})
			     this.tranferLogistic=res.rows
			},
			// 跳转修改详情
			editlogistic(val){
				val.tranid=this.tranid
				uni.navigateTo({
					url:'/pages/logistic/editTranferlogistic/editTranferlogistic?item='+encodeURIComponent(JSON.stringify(val))
				})
			},
			arrivalDateConfirm(e) {
			    console.log(e);
			    this.addlogisticForm.arrivalDate = this.getTime(e.value)
			    this.arrivalDateShow = false
			},
			// 获取当前时间
			getNowTime() {
			    var date = new Date()
			    var month = date.getMonth() + 1;
			    var time = date.getFullYear() + "-" + month + "-" + date.getDate();
			    return time;
			},
			// 时间格式化
			getTime(val) {
			    var date = new Date(val);
			    var year = date.getFullYear(); //年 ,从 Date 对象以四位数字返回年份
			    var month = date.getMonth() + 1; //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
			    var day = date.getDate(); //日 ,从 Date 对象返回一个月中的某一天 (1 ~ 31)
			    //修改月份格式
			    if (month >= 1 && month <= 9) {
			        month = "0" + month;
			    }
			    //修改日期格式
			    if (day >= 0 && day <= 9) {
			        day = "0" + day;
			    }
			    var currentFormatDate = `${year}-${month}-${day}`;
			    return currentFormatDate
			},
			getShippingTypeOptions() {
			    getDicts('biz_shipping_type').then(response => {
			        this.logisticsTypeOptionsDou = response.data
			        this.logisticsTypeOptions.push(response.data)
			        this.form.logisticsTypeName = this.getDictValue(this.logisticsTypeOptionsDou, this
			            .form.logisticsType)
						
			    })
			},
			getDictValue(arr, item) {
			    for (var i = 0; i < arr.length; i++) {
			        if (item == arr[i].dictValue) {
			            return arr[i].dictLabel
			        }
			    }
			},
		}
	}
</script>

<style lang="scss">
.box{
	background-color: #fff;
	.form{
		padding-left: 10px;
	}
}
</style>
